<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>图库管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>图库列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>图库列表</span>
        </div>
        <el-button @click="AddPhoto" type="primary" icon="el-icon-upload">添加图片</el-button>
        <!-- <span class="xcx-add left font14" @click="add()">添加合作伙伴</span> -->
      </div>
      <div class="xcx-content">
        <div class="wxb-box sucaizhongxin__wxb">
          <div class="wyu-main mt20" style="min-height: 700px" v-loading="loading">
            <div class="wyu-block" v-show="!loading">
              <div class="wyu-tips wyu-tips-info" style="display: inline-block;width: 100%">
                <el-row>
                  <el-col :span="21">
                    <el-checkbox v-model="checkAll" @change="selecrAll">全选</el-checkbox>
                    <el-button @click="yidong = true, yiding_all_category_id = category_id" :disabled="checkAll == false"
                      :type="checkAll ? 'primary' : 'info'" style="margin-left: 10px;margin-top: -4px">批量移动</el-button>
                    <el-button @click="deleteAll(null)" :disabled="checkAll == false"
                      :type="checkAll ? 'primary' : 'info'">批量删除</el-button>
                  </el-col>
                  <el-col :span="3"></el-col>
                  <el-col :span="24" style="margin-top: 10px;">
                    <span>分组：</span>
                    <el-button style="margin-bottom: 5px" round @click="category_id = val.category_id; getRes()"
                      :type="val.category_id == category_id ? 'primary' : ''" v-for="(val, key) in  cats" :key="key">{{
                        val.name }}({{ val.num }})</el-button>
                    <el-button @click="photoCat" style="margin-bottom: 5px" round type="info">管理分类</el-button>
                  </el-col>
                </el-row>
              </div>
              <div style="clear: both"></div>
              <div style="display: inline-block;margin-top: 20px;height: 580px;overflow-y: auto;width: 100%">
                <div class="sucai-photo-item" v-for="(val, index) in list" :key="index">
                  <el-image style="width: 170px;height: 100px" :src="$IMG_URL + val.photo" fit="cover" lazy></el-image>
                  <!--复选框-->
                  <p class="text-over" style="margin:  2px 0;color: #8a8a8a;font-size: 12px;">
                    <el-checkbox style="width: 1px" @change="selectRes(val.id)"
                      :value="checkSelect(val.id)"></el-checkbox>
                    <!-- <span
                                            style="width: 150px;display: inline-block;margin-left: 20px"
                                            class="text-over"
                    >{{ val.title }}</span>-->
                  </p>
                  <div class="sucai-photo-item-btn">
                    <el-row>
                      <!-- <el-col :span="8">
                                                <el-popover
                                                    placement="top"
                                                    width="200"
                                                    v-model="val.is_delete"
                                                >
                                                    <div v-loading="val.is_delete_lod">
                                                        <el-input v-model="val.title"></el-input>
                                                        <div style="text-align: right; margin: 0">
                                                            <el-button
                                                                type="text"
                                                                @click="val.is_delete = false"
                                                            >取消</el-button>
                                                            <el-button
                                                                type="text"
                                                                @click="editName(val)"
                                                            >确定</el-button>
                                                        </div>
                                                    </div>
                                                    <el-button
                                                        slot="reference"
                                                        type="text"
                                                        icon="el-icon-edit"
                                                    >编辑</el-button>
                                                </el-popover>
                      </el-col>-->
                      <el-col :span="8">
                        <el-popover placement="top" width="200" v-model="val.is_delete1">
                          <div v-loading="val.is_delete_lod1">
                            <el-select v-model="val.category_id" placeholder="请选择">
                              <el-option v-for="item in cats" :key="item.category_id" :label="item.name"
                                :value="item.category_id"></el-option>
                            </el-select>
                            <div style="text-align: right; margin: 0">
                              <el-button type="text" @click="val.is_delete1 = false">取消</el-button>
                              <el-button type="text" @click="editGroup(val)">确定</el-button>
                            </div>
                          </div>
                          <el-button type="text" slot="reference" icon="el-icon-sort">移动</el-button>
                        </el-popover>
                      </el-col>
                      <el-col :span="8">
                        <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" @confirm="deletePhoto(val)"
                          icon="el-icon-info" iconColor="red" title="确定删除吗？">
                          <el-button slot="reference" type="text">删除</el-button>
                        </el-popconfirm>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
              <div class="page" style="margin-top: 10px;text-align: right">
                <div class="page-mian">
                  <el-pagination @current-change="getRes" :page-size="datas.limit" layout="total, prev, pager, next"
                    :total="datas.count"></el-pagination>
                </div>
              </div>
            </div>
          </div>

          <!--批量移动弹出-->
          <el-dialog title="移动分组" :visible.sync="yidong" width="500px" :modal-append-to-body="false" center>
            <el-select v-model="yiding_all_category_id" placeholder="请选择">
              <el-option v-for="item in cats" :key="item.category_id" :label="item.name"
                :value="item.category_id"></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
              <el-button @click="yidong = false">取 消</el-button>
              <el-button type="primary" @click="editAllGroup">确 定</el-button>
            </span>
          </el-dialog>

          <!--添加图片-->
          <el-dialog title="上传图片" :visible.sync="addPhoto" width="600px" :modal-append-to-body="false" center>
            <el-form ref="form" label-width="80px">
              <el-form-item label="分类">
                <el-select v-model="add_all_category_id" placeholder="请选择">
                  <el-option v-for="item in cats" :key="item.category_id" :label="item.name"
                    :value="item.category_id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="上传图片">
                <el-upload class="uploadsucai" name="image" :on-exceed="tisLimit" ref="uploadphoto" :limit="10" multiple
                  :before-upload="beforeAvatarUpload" :data="getParam()" list-type="picture-card" :action="getaction()">
                  <i class="el-icon-upload"></i>
                </el-upload>
                <p class="wxb-form-tips">单次最多可以选择10张图片</p>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="okAddPhoto">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  geCattCountIndex,
  geIndex,
  editName,
  editResCat,
  deleteResCat,
} from "../../request/api/setting/resource";
import ResoureCat from "./category";

export default {
  components: { ResoureCat },
  data() {
    return {
      cats: [],
      category_id: -1,
      list: [],
      loading: false,
      datas: {},
      selectIds: [],
      checkAll: false,
      add_all_category_id: -1,
      yiding_all_category_id: -1,
      yidong: false,
      addPhoto: false,
      catDong: false,
    };
  },
  created() {
    this.getCatList();
    this.getRes();
  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.warning("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    AddPhoto() {
      if (this.$refs.uploadphoto) {
        this.$refs.uploadphoto.clearFiles();
      }
      this.addPhoto = true;
    },
    okAddPhoto() {
      this.addPhoto = false;
      this.getCatList();
      this.getRes(1);
    },
    getaction() {
      return "https://v5.wxstores.cn/upload";
    },
    getParam() {
      return {
        token: this.$store.getters.token,
        en_token: encodeURI(this.$store.getters.token),
        category_id:
          this.add_all_category_id <= -1 ? 0 : this.add_all_category_id,
      };
    },
    selectRes(val) {
      if (this.checkSelect(val)) {
        this.selectIds.splice(this.selectIds.indexOf(val), 1);
      } else {
        this.selectIds.push(val);
      }
      this.checkAll = this.selectIds.length > 0;
    },
    checkSelect(val) {
      return this.selectIds.indexOf(val) >= 0;
    },
    tisLimit() {
      this.$message("单次最大上传10张图片");
    },
    //去选
    selecrAll() {
      if (this.checkAll == false) {
        this.selectIds = [];
      } else {
        this.list.forEach((val) => {
          this.selectIds.push(val.id);
        });
      }
    },

    getRes(page = 1) {
      this.loading = true;
      geIndex({
        category_id: this.category_id,
        page: page,
      })
        .then((res) => {
          this.datas = res;
          this.list = res.list;
          //给与js 足够的处理时间
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getCatList() {
      this.cats = await geCattCountIndex();
    },
    editName(row) {
      row.is_delete_lod = true;
      editName({
        id: row.id,
        name: row.title,
      })
        .then(() => {
          row.is_delete_lod = false;
          row.is_delete = false;
        })
        .catch(() => {
          row.is_delete = false;
          row.is_delete_lod = false;
        });
    },

    //批量删除
    deleteAll() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletePhoto();
        })
        .catch(() => { });
    },

    //删除
    deletePhoto(val = null) {
      if (!val && this.selectIds.length <= 0) {
        return false;
      }
      this.loading = true;
      deleteResCat({
        id: val ? val.id : 0,
        ids: this.selectIds,
      })
        .then(() => {
          this.getCatList();
          this.getRes();
          this.selectIds = [];
          this.checkAll = true;
        })
        .catch(() => {
          this.loading = false;
          this.selectIds = [];
        });
    },
    photoCat() {
      this.$router.push({
        path: "/photos/category",
      });
    },
    //修改分组
    editAllGroup() {
      if (this.selectIds.length <= 0) {
        return false;
      }
      this.loading = true;
      editResCat({
        ids: this.selectIds,
        cat_id: this.yiding_all_category_id,
      })
        .then(() => {
          this.getCatList();
          this.getRes();
          this.selectIds = [];
          this.yidong = false;
          this.checkAll = true;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //修改分组
    editGroup(val) {
      val.is_delete_lod1 = true;
      editResCat({
        id: val.id,
        cat_id: val.category_id,
      })
        .then(() => {
          this.getCatList();
          this.getRes();
        })
        .catch(() => {
          val.is_delete_lod1 = false;
        });
    },
  },
};
</script>

<style>
.sucaizhongxin__wxb {
  box-sizing: content-box;
}

.sucai-photo-item {
  /*width: 186px;*/
  /* height: 238px; */
  border: 2px solid #f4f5f9;
  float: left;
  margin: 10px;
}

.sucai-photo-item-btn {
  background-color: #f4f5f9;
}
</style>
